<template>
  <div class="timeline">
    <el-timeline>
      <el-timeline-item class="el-timeline-item__timestamp_one" timestamp="2024/12/1 待派单" placement="top" type="primary" size="large" color="#7D9EC0">
        <el-card>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item label="工单主题">
              工单主题
            </el-descriptions-item>
            <el-descriptions-item label="工单类型">
              工单类型
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              张山
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
              15555555555
            </el-descriptions-item>
            <el-descriptions-item label="楼座房号">
              2号楼1单元806户
            </el-descriptions-item>
            <el-descriptions-item label="问题描述">
              小区脏乱差
            </el-descriptions-item>
            <el-descriptions-item label="问题图片">
              <el-image v-for="item in srcList" :key="item" style="width: 100px; height: 100px; margin-left: 5px" :src="item" :preview-src-list="srcList"></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
      <el-timeline-item class="el-timeline-item__timestamp_two" timestamp="2024/12/2 已派单" placement="top" type="primary" size="large" color="#9933cc">
        <el-card>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item label="处理部门">
              处理部门
            </el-descriptions-item>
            <el-descriptions-item label="分配方式">
              自动派单/人工指派/抢单
            </el-descriptions-item>
            <el-descriptions-item label="处理人">
              处理人
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
      <el-timeline-item class="el-timeline-item__timestamp_three" timestamp="2024/12/3 已退单" placement="top" type="primary" size="large" color="#ff0000">
        <el-card>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item label="退单部门">
              退单部门
            </el-descriptions-item>
            <el-descriptions-item label="退单人">
              退单人
            </el-descriptions-item>
            <el-descriptions-item label="退单原因">
              退回原因
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
      <el-timeline-item class="el-timeline-item__timestamp_four" timestamp="2024/12/4 问题处理反馈" placement="top" type="primary" size="large" color="#6633ff">
        <el-card>
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item label="处理完成描述">
              处理完成描述
            </el-descriptions-item>
            <el-descriptions-item label="处理完成图片">
              <el-image v-for="item in srcList" :key="item" style="width: 100px; height: 100px; margin-left: 5px" :src="item" :preview-src-list="srcList"></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
      <el-timeline-item class="el-timeline-item__timestamp_five" timestamp="2024/12/5 已完成" placement="top" type="primary" size="large" color="#67c23a">
        <el-card>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item label="完成时间">
              2024/12/5
            </el-descriptions-item>
            <el-descriptions-item label="评价结果">
              <el-rate disabled v-model="rateValue" show-text></el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="评价描述">
              评价描述评价描述
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
      <el-timeline-item class="el-timeline-item__timestamp_six" timestamp="2024/12/5 未解决" placement="top" type="primary" size="large" color="#e6a23c">
        <el-card>
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item label="未解决原因描述">
              未解决原因描述未解决原因描述
            </el-descriptions-item>
            <el-descriptions-item label="未解决图片">
              <el-image v-for="item in srcList" :key="item" style="width: 100px; height: 100px; margin-left: 5px" :src="item" :preview-src-list="srcList"></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    process: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      rateValue: 3, // 评价结果
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  mounted() {
    // console.log(this.tableData)
  },
  methods: {
  }
}
</script>
<style scoped>
.timeline {
  width: 100%;
}
</style>

